<template>
    <div class="club-create-container">
        <h3>社团创建</h3>
        <el-space alignment="left" style="width:100%" direction="vertical"> 
            <club-form :disabled="createLoading" v-model:data="createClubData"></club-form>
            <el-button-group>
                <el-button type="primary" :loading="createLoading" @click="create">创建</el-button>
            </el-button-group>
        </el-space>
    </div>
</template>

<script lang="ts">
import ClubForm from '@/components/admin/ClubForm.vue'
import { ICreateClubReq } from '@/headers/admin/reqs.h';
import { useAdminStore } from '@/store/admin'
import { CreateClubAction } from '@/store/admin/actions/club';
import { useLoadingStatus } from '@/utils';
import { ElMessage } from 'element-plus';
import { defineComponent, ref } from 'vue'
const defaultCreateReq:ICreateClubReq = {
            name:"",
            primary_color:"#FFF",
            address:"",
            location:"",
            introduction:"",
        }
export default defineComponent({
    components: { ClubForm },
    setup() {
        const store = useAdminStore();
        const createClubData = ref<ICreateClubReq>({
            ...defaultCreateReq
        });
        const {loadingFunc:create,loading:createLoading} = useLoadingStatus(async function() {
            const res = await CreateClubAction.getInstance().call(store,createClubData.value);
            ElMessage.success({
                type:"success",
                message:`社团创建成功 ID: ${res.id}`
            })
            createClubData.value = {
                ...defaultCreateReq
            }
        })
        return {
            createClubData,
            create,
            createLoading
        }
    },
})
</script>
